<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem>管理员信息</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <!-- 模糊查询 -->
    <Form ref="formInfo" label-position="left" :label-width="90" :model="formInfo" inline>
      <FormItem label="管理员账号" prop="loginname">
        <i-input v-model="formInfo.loginname" placeholder="请输入" style="width: 200px"></i-input>
      </FormItem>
      <Button type="primary" @click="selectSubmit()" class="cha">查询</Button>
    </Form>
    <!-- 添加、删除 -->
    <!-- <div class="add">
      <Button type="primary" icon="plus" @click="addRole">添加</Button>
      <Button type="error" icon="trash-a">删除</Button>
    </div>
    <div class="table-wrap">
      <Table @on-select="tableSelect" :columns="columns1" :data="data2"></Table>
    </div>
    <div class>
      <Page :total="100" show-sizer show-elevator></Page>
    </div> -->
    <div class="butt">
      <Button type="primary" icon="md-add" @click="addRole">添加</Button>
      <Button type="error"  class="delete">批量删除</Button>
    </div>
    <Table border :columns="columns1" :data="data2" class="table"></Table>
    
    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fenye2">
    </Page>


    <!--修改公司信息弹窗-->
    <Modal v-model="formTable.modal" title="管理员信息修改" @on-cancel="modalCancel" >
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="90"
        :model="formTable"
      >
        <Form-item label="管理员账号" prop="loginname">
          <i-input v-model="formTable.loginname" placeholder="请输入名称"></i-input>
        </Form-item>
        <Form-item label="管理员密码" prop="password">
          <i-input v-model="formTable.password" placeholder="请输入密码"></i-input>
        </Form-item>
        <Form-item label="状态" prop="state">
          <i-input v-model="formTable.state" placeholder="请输入密码"></i-input>
        </Form-item>
        <Form-item label="真实姓名" prop="realname">
          <i-input v-model="formTable.realname" placeholder="请输入真实姓名"></i-input>
        </Form-item>
        <Form-item label="创建时间" prop="createtime">
          <i-input v-model="formTable.createtime" placeholder="请输入创建时间"></i-input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    const validatePassCheck = (rule, value, callback) => {}
    return {
      pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
      formInfo: {
        loginname: ''
      },
      formTable: {
        modal: false,
        loading: false,
        userid: '',
        loginname: '',
        password: '',
        state: '',
        realname: '',
        createtime: ''
      },

      columns1: [
        {
          type: 'selection',
          width: 80,
          align: 'center'
        },
        {
          title: '序号',
          key: 'userid',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('span', params.index + 1)
          }
        },
        {
          title: '管理员账号',
          key: 'loginname',
          width: 160,
          align: 'center',
        },
        {
          title: '管理员密码',
          key: 'password',
          align: 'center',
        },
        {
          title: '状态',
          key: 'state',
          width: 160,
          align: 'center',
        },
        {
          title: '真实姓名',
          key: 'realname',
          width: 200,
          align: 'center',
        },
        {
          title: '创建时间',
          key: 'createtime',
          align: 'center',
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 140,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.roleEdit(params.row)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.deleteRole(params.index,params.row)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data2: [
        {
          userid:'',
          loginname: '',
          password: '',
          state: '',
          realname: '',
          createtime: ''
        }
      ]
    }
  },
  methods: {
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getsysUser();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getsysUser();
    },
    getsysUser(){
      this.$axios.get("sysUser",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response =>{
          console.log(response.data);
          this.pageTotal=response.data.tatol
          this.data2 = response.data.data;
        })
        .catch();
    },
    // 查询
    selectSubmit () {
      this.$axios.get('sysuser', {
        params: {
          name: this.formInfo.loginname
        }
        }).then(response => {
          console.log(response.data)
          this.data2 = response.data.data
        }).catch()
    
      this.$refs[loginname].validate(valid => {
      })
    },
    // 用户添加
    addRole () {
      this.$router.push('sysUserAdd')
    },
    // 删除
    deleteRole (index,row) {
      this.$Modal.confirm({
          title: '温馨提示',
          width: 300,
          content: '<p>你确定要删除?删除后不可恢复!</p>',
          loading: false,
          onOk: () => {
            this.$axios
              .delete("sysuser",{
                params:{
                  id: row.userid
                }
              })
              .then(response => {
                if(response.data.code == 0){
                  this.data2.splice(index, row.userid)
                }else{
                  this.$Notice.error({
                    title: '删除Fail'})
                  }
              }).catch()
            }
        });   
    },
    // 编辑按钮
    editSubmit (row) {
      this.formTable.loading = true

      this.$axios.put('sysuser', {
        userid: this.formTable.userid,
        loginname: this.formTable.loginname,
        password: this.formTable.password,
        state: this.formTable.state,
        realname: this.formTable.realname,
        createtime: this.formTable.createtime
      }).then(response => {
        this.formTable.loading = false
        this.modalCancel()
        if (response.data.code == 0) {
          this.$Notice.success({
            title: '信息修改成功'
          })
        } else {
          this.$Notice.error({
            title: '信息修改失败'
          })
        }
      }).catch(
        console.log(response.data)
      )
    },
    // 获取每一行值
    roleEdit (row) {
      // console.log(row)
      this.formTable.modal = true

      this.formTable.userid = row.userid,
      this.formTable.loginname = row.loginname,
      this.formTable.password = row.password,
      this.formTable.state = row.state,
      this.formTable.realname = row.realname,
      this.formTable.createtime = row.createtime
    },
    modalCancel () {
      this.formTable.modal = false
      this.$refs['formTable'].resetFields()
    }
  },
  created: function () {
    this.getsysUser()
    // this.$axios
    //   .get('sysusers')
    //   .then(response => {
    //   console.log(response.data)
    //     this.data2 = response.data.data
    //   })
    //   .catch()
  }
}
</script>

<style >
.fenye2 {
  position: relative;
  margin-top: 30px;
  left: 32%;
}
.table {
  position: relative;
  margin-top: 20px;
}
.butt{
  position: relative;
  top: 1px;
  left: 1px;
}
.delete{
  position: relative;
  left: 20px;
}
.cha{
  position: relative;
  top: 1px;
}
</style>
